<template>
    <div class="header-view flx-row">
        <div class="left flx-row">
            <el-icon>
                <ArrowLeft />
            </el-icon>
            <el-icon>
                <ArrowRight />
            </el-icon>
            <el-icon>
                <Refresh />
            </el-icon>
            <el-input
      v-model="input3"
      class="search"
      placeholder="搜索音乐，MV，歌单，用户"
      :prefix-icon="Search"
    />
         </div>
        <div class="right">
            <el-icon>
                <SemiSelect />
            </el-icon>
            <el-icon >
                <CloseBold />
            </el-icon>
        </div>
    </div>
</template>

<script setup>

</script>

<style lang="scss">
.header-view {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background-color: #fff;
    .el-icon {
        font-size: 17px;
        color: #999;
        margin-right: 10px;
    }

    .el-icon:hover {
        color: #31c27c;
    }

    .left {
        flex: 1;

        .el-icon-refresh {
            color: #333;
        }

        .search {
            margin-left: 15px;
            width: 200px;
            .el-input__wrapper {
                border: none;
                border-radius: 30px;
                background: #e9e9e9;
                color: #8c8c8c;
                font-size: 12px;
            }
        }
    }
}</style>